<template>
  <div class="data-view-wrap">
    <div class="scale-box" ref="scaleBox" :style="{
      height: height + 'px',
      width: width + 'px',
    }">
      <div class="data-page-container">
        <div class="header">
          <div class="date-wrap">
            <iframe class="header-index__left--weather" scrolling="no"
              src="https://widget.tianqiapi.com/?style=tx&skin=mango&color=ffffff&city=成都&align=center" frameborder="0"
              width="100%" height="30" allowtransparency="true"></iframe>
          </div>
          <div class="title"></div>
          <div class="weather">
            <div class="label">数据统计时间</div>
            <el-date-picker v-model="timeList" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" size="mini" value-format="yyyy-MM-dd" @change="dateHandler" style="width: 15rem" />
          </div>
          <img class="return" @click="returnHome" src="../../assets/data-board/go.png" alt="" />
        </div>

        <div class="main">
          <div class="left">
            <div class="module-box">
              <div class="module-title">云币/酒币兑换 TOP5</div>
              <div class="module-charts">
                <div class="charts1">
                  <Bar :list="exchangeTopList" />
                </div>
              </div>
            </div>
            <div class="module-box">
              <div class="module-title">总部商品销售占比</div>
              <div class="module-charts">
                <div class="charts2">
                  <Pie :list="productRatioList" />
                </div>
              </div>
            </div>
            <div class="module-box">
              <div class="module-title">各等级会员占比</div>
              <div class="module-charts">
                <div class="charts3">
                  <RingPie :list="memberRatioList" />
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="module-box">
              <div class="module-title">专卖店销售 TOP5</div>
              <div class="module-charts">
                <div class="charts4">
                  <HorizontalBar :list="storeTopList" />
                </div>
              </div>
            </div>
            <div class="module-box">
              <div class="module-title">标品售卖数量</div>
              <div class="module-charts">
                <div class="charts5">
                  <ThreeDPie :list="productSaleNumList" />
                   <!-- <DinglePie :list="productSaleNumList" /> -->
                </div>
              </div>
            </div>
            <div class="module-box">
              <div class="module-title">大区销售 TOP5</div>
              <div class="module-charts">
                <div class="charts6">
                  <ThreeDBar :list="zoneTopList" />
                </div>
              </div>
            </div>
          </div>
          <div class="map-box">
            <div class="top">
              <div class="data-list" v-for="(item, index) in topHead" :key="index">
                <div class="num">{{ item.value }}</div>
                <div class="name">{{ item.label }}</div>
              </div>
            </div>
            <div class="map" ref="mapChart"></div>
            <div class="seat-box"></div>
            <div class="bottom">
              <div class="module-box">
                <div class="module-title">近半年云店销售趋势（万元）</div>
                <div class="module-charts">
                  <div class="charts7">
                    <LineChart :list="monthMoneyList" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';
// import 'echarts-gl';
import china from 'echarts/map/json/china.json';
import { mapOption } from './mapChartOptions';
import moment from 'moment';
import 'moment/locale/zh-cn';
import {
  getPageHead,
  getOrderMoneyZoneTopList,
  getOrderGoodsDistribution,
  getOrderMoneyStoreTopList,
  getOrderMoneyMonthList,
  getOrderStandardGoodsDistribution,
  getMemberGradeDistributionList,
  getBonusCityTopList,
} from '@/api/dataBoard';
import { zoneLocation } from './zoneLocation';
import Bar from './components/Bar.vue';
import Pie from './components/Pie.vue';
import LineChart from './components/Line.vue';
import RingPie from './components/RingPie.vue';
import ThreeDBar from './components/ThreeDBar.vue';
import ThreeDPie from './components/ThreeDPie.vue';
import HorizontalBar from './components/HorizontalBar.vue';
import DinglePie from './components/DinglePie.vue';
let myMapCharts = null;
export default {
  name: 'DataBoard',
  components: {
    ThreeDPie,
    ThreeDBar,
    LineChart,
    Bar,
    Pie,
    RingPie,
    HorizontalBar,
    DinglePie
  },
  data() {
    return {
      scale: 1,
      width: 1920,
      height: 1080,

      timeList: [],
      topHead: [
        { label: '消费者会员数量', value: 0, prop: 'memberNum' },
        { label: '营业中店铺数量', value: 0, prop: 'storeNum' },
        { label: '总订单数量', value: 0, prop: 'orderNum' },
        { label: '累计成交金额', value: 0, prop: 'orderAmountNum' },
      ],

      zoneTopList: [], //大区销售top5
      productRatioList: [], //总部商品售卖占比
      productSaleNumList: [], //标品售卖数量
      storeTopList: [], //专卖店销售Top5
      memberRatioList: [], //各等级会员占比
      exchangeTopList: [], //云币酒币兑换Top5

      monthMoneyList: [], //近半年销售趋势

      zoneMapList: [], //大区地图数据

      startTime: moment().subtract(1, 'months').format('YYYY-MM-DD'),
      endTime: moment().format('YYYY-MM-DD'),
    };
  },
  created() {
    this.timeList = [this.startTime, this.endTime];
    this.getTopPageHead();
  },
  mounted() {
    myMapCharts = echarts.init(this.$refs.mapChart);
    const _that = this;
    this.setScale();
    window.addEventListener('resize', this.debounce(_that.setScale, 500));
    this.$nextTick(() => {
      this.getMonthMoney();
      this.initData();
    });
  },
  methods: {
    debounce(fn, delay) {
      let timer = null;
      return function (...args) {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          fn.apply(this, args);
        }, delay);
      };
    },
    getScale() {
      // 固定好16：9的宽高比，计算出最合适的缩放比
      const ww = window.innerWidth / this.width;
      return ww;
    },
    setScale() {
      this.scale = this.getScale();
      this.$nextTick(() => {
        this.$refs.scaleBox.style.setProperty('--scale', this.scale);
      });
    },

    dateHandler() {
      this.startTime = moment(this.timeList[0]).format('YYYY-MM-DD');
      this.endTime = moment(this.timeList[1]).format('YYYY-MM-DD');

      this.initData();
    },
    returnHome() {
      this.$router.replace('/homepage');
    },

    initMapChart() {
      myMapCharts = echarts.init(this.$refs.mapChart);
      echarts.registerMap('china', china);

      // 得到数据后渲染
      const result = mapOption(this.zoneMapList);
      myMapCharts.setOption(result);
    },

    // 获取头部信息
    getTopPageHead() {
      getPageHead().then((res) => {
        this.topHead.forEach((item) => {
          item.value = res.result[item.prop];
        });
      });
    },

    // 大区销售top5
    getZoneTop() {
      getOrderMoneyZoneTopList({
        startTime: this.startTime,
        endTime: this.endTime,
        limit: 99,
      }).then((res) => {
        this.zoneTopList = res.result.slice(0, 5);

        this.zoneMapList = res.result.map((item) => {
          const curZone = zoneLocation.find((zone) => zone.name === item.zoneName);
          return {
            ...curZone,
            ...item,
          };
        });

        this.initMapChart();
      });
    },

    // 总部商品售卖占比
    getProductRatio() {
      getOrderGoodsDistribution({
        startTime: this.startTime,
        endTime: this.endTime,
        limit: 5,
      }).then((res) => {
        this.productRatioList = res.result;
      });
    },

    // 标品售卖数量
    getProductSaleNum() {
      getOrderStandardGoodsDistribution({
        startTime: this.startTime,
        endTime: this.endTime,
        limit: 5,
      }).then((res) => {
        // res.result = [
        //   {
        //     "goodsName": "0617-支付",
        //     "totalAmount": 15,
        //     "goodsAmount": 15,
        //     "percent": 100.00
        //   },
        // ]
        // setTimeout(() => {
        //   res.result = Array(5).fill(0).map((item, index) => {
        //     return {
        //       goodsName: `06${17 + index}-支付`,
        //       totalAmount: 15,
        //       goodsAmount: Math.floor(Math.random() * 100),
        //       percent: 100.0,
        //     }
        //   });
        //   this.productSaleNumList = res.result;
        // }, 5000);
        this.productSaleNumList = res.result;
      });
    },

    // 专卖店销售Top5
    getStoreTop() {
      getOrderMoneyStoreTopList({
        startTime: this.startTime,
        endTime: this.endTime,
        limit: 5,
      }).then((res) => {
        this.storeTopList = res.result;
      });
    },

    // 各等级会员占比
    getMemberRatio() {
      getMemberGradeDistributionList({
        startTime: this.startTime,
        endTime: this.endTime,
        limit: 5,
      }).then((res) => {
        this.memberRatioList = res.result;
      });
    },

    // 云币酒币兑换Top5
    getExchangeTop() {
      getBonusCityTopList({
        startTime: this.startTime,
        endTime: this.endTime,
        limit: 5,
      }).then((res) => {
        this.exchangeTopList = res.result;
      });
    },

    // 获取月度成交金额
    getMonthMoney() {
      getOrderMoneyMonthList({
        startTime: moment().subtract(6, 'months').format('YYYY-MM-DD'),
        endTime: moment().format('YYYY-MM-DD'),
      }).then((res) => {
        this.monthMoneyList = res.result;
      });
    },

    // 初始化数据
    initData() {
      this.getZoneTop();
      this.getProductRatio();
      this.getProductSaleNum();
      this.getStoreTop();
      this.getExchangeTop();
      this.getMemberRatio();
    },
  },
};
</script>

<style scoped lang="scss">
.data-view-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #000;
}

.scale-box {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  transform: scale(var(--scale));
  display: flex;
  flex-direction: column;
  transform-origin: 0 0;
  left: 0%;
  top: 0%;
  z-index: 999;
}

.data-page-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #fff;
  background: url(../../assets/data-board/bg.png) no-repeat center center;
  position: relative;
  background-size: cover;

  .header {
    height: 77px;
    width: 100%;
    position: relative;

    .date-wrap {
      position: absolute;
      left: 35px;
      top: 44px;
      font-size: 14px;
      display: flex;
      align-items: center;
      z-index: 3;

      span {
        margin-right: 25px;
      }

      .date-time {
        display: flex;
        align-items: center;

        img {
          width: 23px;
          height: 24px;
          margin-bottom: px;
          margin-right: 5px;
        }

        .time {
          font-size: 16px;
          font-weight: 500;
        }
      }
    }

    .title {
      width: 100%;
      height: 77px;
      background: url(../../assets/data-board/header_bg.png) no-repeat center center;
      background-size: 1920px 77px;
      margin: 0;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
    }

    .weather {
      display: flex;
      align-items: center;
      position: absolute;
      right: 160px;
      top: 42px;
      font-size: 14px;
      z-index: 3;
      display: flex;
      align-items: center;

      .label {
        margin-right: 10px;
        color: #d1deff;
      }

      /deep/ .el-range-editor--mini {
        background: transparent !important;

        .el-range-input {
          color: #d1deff;
          background: transparent !important;
        }
      }

      img {
        width: 23px;
        height: 24px;
        margin-bottom: -4px;
        margin-right: 5px;
      }

      .time {
        font-size: 16px;
        font-weight: 500;
      }
    }

    .return {
      position: absolute;
      right: 35px;
      top: 37px;
      height: 37px;
      width: 111px;
      z-index: 3;
      cursor: pointer;
    }
  }

  .main {
    flex: 1;
    position: relative;

    .left {
      width: 425px;
      height: 923px;
      position: absolute;
      left: 30px;
      top: 23px;
      z-index: 6;
      background: linear-gradient(180deg,
          rgba(0, 0, 0, 0.42) 0%,
          rgba(0, 0, 0, 0) 100%);
      border-radius: 9px;
      padding: 30px 20px;
      box-sizing: border-box;
    }

    .right {
      width: 425px;
      height: 923px;
      position: absolute;
      right: 30px;
      top: 23px;
      z-index: 6;
      background: linear-gradient(180deg,
          rgba(0, 0, 0, 0.42) 0%,
          rgba(0, 0, 0, 0) 100%);
      border-radius: 9px;
      padding: 30px 20px;
      box-sizing: border-box;
    }

    .map-box {
      display: flex;
      flex-direction: column;
      text-align: center;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;

      .top {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 6;

        .data-list {
          width: 152px;
          height: 68px;
          background: linear-gradient(180deg,
              rgba(40, 66, 233, 0) 0%,
              rgba(38, 18, 206, 0.75) 100%);
          border-radius: 10px;
          border-image: linear-gradient(180deg,
              rgba(102, 209, 239, 0.2),
              rgba(70, 195, 255, 1)) 1 1;
          backdrop-filter: blur(20px);
          margin: 0 25px 50px;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;

          .num {
            font-weight: 600;
            font-size: 20px;
            color: #79b7de;
            line-height: 28px;
            font-family: PingFangSC, PingFang SC;
          }

          .name {
            font-size: 16px;
            color: #90d4ff;
            line-height: 22px;
          }
        }
      }

      .map {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 2;
      }

      .seat-box {
        flex: 1;
      }

      .bottom {
        position: relative;
        top: -30px;
        width: 900px;
        height: 240px;
        align-self: center;
        z-index: 6;

        .module-box {
          display: flex;
          flex-direction: column;
          height: 100%;
        }

        .module-title {
          text-align: left;
        }

        .module-charts {
          flex: 1;
        }
      }
    }

    .module-title {
      height: 40px;
      width: 370px;
      background: url(../../assets/data-board/title_bg.png) no-repeat 0 center;
      background-size: cover;
      line-height: 36px;
      padding-left: 25px;
      font-size: 17px;
      font-weight: 500;
      font-style: italic;
      font-family: Source-KeynoteartHans, Source-KeynoteartHans;
    }

    .module-box {
      .charts1 {
        height: 270px;
        width: 100%;
      }

      .charts2 {
        height: 280px;
        width: 100%;
      }

      .charts3 {
        height: 220px;
        width: 100%;
      }

      .charts4 {
        height: 290px;
        width: 100%;
      }

      .charts5 {
        height: 220px;
        width: 100%;
      }

      .charts6 {
        height: 260px;
        width: 100%;
      }

      .charts7 {
        height: 100%;
        width: 100%;
      }
    }
  }
}
</style>
